import React, {PureComponent} from 'react'
import '../../../css/menu.scss'
import Icon from 'antd/lib/icon';
import Link from 'react-router-dom/Link'
import classNames from 'classnames'
import config from './menuConfig'
class Menu extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            index: 0,
            subIndex: -1,
            show: true

        }

        const currentUrl = '/'+location.hash.split('#')[1].split('/')[2]
        console.log(currentUrl)
        config.forEach((main, index) => {
            if (main.href === currentUrl) {
                this.state.index = index
            }
            main.subMenu.forEach((sub, subIndex) => {
                if (sub.href === currentUrl) {
                    this.state.subIndex = subIndex
                    this.state.index = index
                }
            })

        })
    }

    componentDidUpdate() {
    }

    /**/
    getContentClass = (index) => {
        const active = index === this.state.index && (this.state.show)
        return classNames({
            'menu-content': true,
            active
        })
    }

    /*子菜单样式*/
    getSubClass = (index, subIndex) => {
        const active = ((index === this.state.index) && (subIndex === this.state.subIndex))
        return classNames({
            'sub-item': true,
            active
        })
    }

    /*主菜单样式*/
    getMenuClass = (index) => {
        const active = index === this.state.index
        return classNames({
            'menu-text': true,
            active
        })
    }

    changeMenu = (index) => {
        this.setState({index, subIndex: -1, show: this.state.index === index ? !this.state.show : true})
        this.props.handleClick()
    }

    changeSubMenu = (subIndex) => {
        this.setState({subIndex})
        this.props.handleClick()
    }

    render() {
        const path = this.props.match.url
        return (
            <div className="menu-bar">
                {/*主菜单*/}
                {config.map((menu, index) => {
                    return (<div className="menu-item" key={`menu-${index}`}>
                        {/*<Link to={path + menu.href} replace>*/}
                            <div className={this.getMenuClass(index)}
                                 onClick={this.changeMenu.bind(this, index)}>{menu.title}
                            </div>
                        {/*</Link>*/}
                        <div className={this.getContentClass(index)}>
                            {/*子菜单*/}
                            {menu.subMenu.map((sub, subIndex) => {
                                return <Link
                                    key={`sub-menu-${index}-${subIndex}`}
                                    to={sub.link ? '' : path + sub.href} replace>
                                    <div
                                        onClick={this.changeSubMenu.bind(this, subIndex)}
                                        className={this.getSubClass(index, subIndex)}>{sub.title}</div>
                                </Link>
                            })}
                        </div>
                    </div>)
                })}
            </div>
        )
    }
}

export default Menu